<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
    <title>form generator</title>
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        #frame {
            display: none;
        }
    </style>
    <style>
        .pre-loader {
            position: absolute;
            top: calc(50% - 32px);
            left: calc(50% - 32px);
            width: 64px;
            height: 64px;
            border-radius: 50%;
            perspective: 800px;
        }

        .pre-loader .inner {
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .pre-loader .inner.one {
            left: 0%;
            top: 0%;
            -webkit-animation: rotate-one 1s linear infinite;
            animation: rotate-one 1s linear infinite;
            border-bottom: 3px solid #bc9048;
        }

        .pre-loader .inner.two {
            right: 0%;
            top: 0%;
            -webkit-animation: rotate-two 1s linear infinite;
            animation: rotate-two 1s linear infinite;
            border-right: 3px solid #74aeff;
        }

        .pre-loader .inner.three {
            right: 0%;
            bottom: 0%;
            -webkit-animation: rotate-three 1s linear infinite;
            animation: rotate-three 1s linear infinite;
            border-top: 3px solid #caef74;
        }

        @keyframes rotate-one {
            0% {
                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
            }

            100% {
                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-two {
            0% {
                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
                transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
            }

            100% {
                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
                transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-three {
            0% {
                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
                transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
            }

            100% {
                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
                transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="pre-loader" id="pre-loader">
        <div class="inner one"></div>
        <div class="inner two"></div>
        <div class="inner three"></div>
    </div>
    <iframe id="frame" width="100%" height="100%" frameborder="0"></iframe>
    <script>
        window.onload = function () {
            const vscode = acquireVsCodeApi()
            const cmds = {
                setSrc: function (message) {
                    var frame = document.getElementById('frame')
                    frame.src = message.data.src
                    frame.onload = function () {
                        document.getElementById('pre-loader').style.display = "none"
                        frame.style.display = "block"
                        frame.contentWindow.postMessage({
                            cmd: 'mountApp',
                            data: message.data.db // 发送db.json中的内容
                        }, '*')
                    }
                },
                writeFile: function (message) {
                    vscode.postMessage(message)
                },
                openUrl: function (message) {
                    vscode.postMessage(message)
                },
                setStorageItem: function (message) {
                    vscode.postMessage(message)
                }
            }

            window.addEventListener('message', event => {
                const message = event.data
                if (message && message.cmd) cmds[message.cmd](message)
            })
        }
    </script>
</body>

</html>